/*
 * 默认主题
 */

.cherry.theme__default {
  /* ========== 基础色彩变量覆盖 ========== */
  --primary-color: var(--oc-blue-6);
  --secondary-color: var(--oc-blue-0);

  --base-font-color: var(--oc-gray-8);
  --base-editor-bg: var(--oc-white);
  --base-previewer-bg: var(--oc-white);
  --base-border-color: var(--oc-blue-5);

  /* ========== 工具栏相关变量 ========== */
  --toolbar-bg: var(--oc-white);
  --toolbar-btn-color: var(--oc-gray-8);
  --toolbar-btn-hover-bg: var(--oc-gray-2);
  --toolbar-btn-hover-color: var(--primary-color);
  --toolbar-btn-active-bg: var(--secondary-color);
  --toolbar-split-color: var(--oc-blue-5);

  /* ========== 编辑器相关变量 ========== */
  --editor-header-color: var(--primary-color);
  --editor-string-color: var(--oc-blue-4);
  --editor-comment-color: var(--oc-blue-4);
  --editor-quote-color: var(--oc-gray-8);
  --editor-link-color: var(--oc-blue-4);
  --editor-url-bg-color: var(--oc-blue-0);
  --editor-v2-color: var(--oc-gray-8);
  --editor-v3-color: var(--primary-color);
  --editor-keyword-color: var(--oc-blue-4);
  --editor-selection-bg: var(--oc-blue-2);

  /* ========== Markdown 相关变量 ========== */
  --md-heading-color: var(--primary-color);
  --md-paragraph-color: var(--oc-gray-8);
  --md-link-color: var(--oc-blue-4);
  --md-link-hover-color: var(--primary-color);
  --md-inline-code-color: var(--oc-blue-4);
  --md-inline-code-bg: var(--oc-blue-0);
  --md-blockquote-bg: var(--oc-blue-0);
  --md-hr-border: var(--oc-blue-5);
  /* ========== table 相关变量 ========== */
  --md-table-border: #D9DFE3;
    --md-table-drag-border-bg: var(--oc-cyan-5);
  --md-table-sort-active-bg: rgb(208, 226, 247);

  /* ========== 手风琴组件变量覆盖 ========== */
  --accordion-bg: var(--oc-blue-0);
  --accordion-border: var(--oc-blue-2);

  --accordion-summary-bg: var(--oc-blue-5);
  --accordion-summary-hover-bg: var(--oc-blue-4);

  --accordion-body-bg: var(--oc-blue-0);
  --accordion-body-border: var(--oc-blue-1);
  --accordion-body-color: var(--oc-gray-8);
}

/** 预览区域样式 */
.cherry-markdown.theme__default {

  p,
  div {}

  h1 {}

  h2 {}

  h3 {}

  h4 {}

  h5 {}

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    /** 标题前面的锚点或序号 */
    .anchor {}
  }

  /** checklist 模式，未勾选时 */
  .ch-icon-square {}

  /** checklist 模式，勾选时 */
  .ch-icon-check {}

  blockquote {}

  a {
    &:hover {}
  }

  strong {}

  em {}

  del {}

  sup {}

  sub {}

  hr {}

  img {}

  video {}

  audio {}

  /** 行内代码 */
  code:not([class]) {}

  /** 
   * 代码块
   */
  pre code {}

  /** 
   * 表格
   */
  table,
  .cherry-table {
    tr {}

    th {}

    td {}
  }

  /** 可以理解为上下结构的音标，下部是文字，上部是对应的拼音 */
  ruby {
    /** 上部的拼音 */
    rt {}
  }

  /** 脚注 */
  .footnote {
    .footnote-title {}

    .one-footnote {
      a.footnote-ref {}
    }
  }

  /** 行间公式 */
  .Cherry-InlineMath {}

  /** 段落公式 */
  .Cherry-Math {}

  /** 目录 */
  .toc {
    .toc-title {}

    .toc-li {
      .level-1 {}

      .level-2 {}

      .level-3 {}
    }
  }

}

ol {
  li {}
}
